<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户注册</title>
		<link rel="icon" href="//s01.mifile.cn/favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="css/login.css">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/web.js" ></script>

	</head>
	<body style="background: rgb(20,33,42)">
		<div id="div2">
		<form  method="post" action="./regist.php">
		<div class="regist">
			<div class="regist_center">
				<div class="regist_top">
					<div class="left fl">会员注册</div>
					<div class="right fr"> <a href="login.html"><span style="margin-left: 20px;">立即登录</span></a><a href="login.html"><span style="margin-left: 20px;">|</span></a><a style="margin-left: 20px;" href="./index.html" target="_self">小米商城</a></div>
					<div class="clear"></div>
					<div class="xian center"></div>
				</div>
				<h5 align="center" id="tishikuang" style="line-height:30px; color: red; font-size: medium;">{{message}}</h5>
				<div class="regist_main center">
					<div class="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;<input class="shurukuang" type="text" name="username" v-model="input1" placeholder="请输入你的用户名"/><span>请输入长度大于等于2位的字符</span></div>
					<div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="shurukuang" type="password" v-model="input2" name="password" placeholder="请输入你的密码"/><span>请输入5位以上字符</span></div>
					

					<div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;<input class="shurukuang" type="text" name="tel" v-model="input3" placeholder="请填写正确的手机号"/><span>填写下手机号吧，方便我们联系您！</span></div>
					
					<div class="username">短信验证:&nbsp;&nbsp;<input class="shurukuang" v-model="phonein" type="text" name="tel" placeholder="请填写正确的短信验证码"/><input type="button" onclick="settime(this)" @click="phoneget" class="chenknum1" value="点击获取验证码"></input></div>
					<div class="username">
						<div class="left fl">验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="yanzhengma" type="text" v-model="input4" name="username" placeholder="请输入验证码"/></div>
						<div class="right fl"><img v-on:click="change" v-bind:src="web_check_code"></div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="regist_submit">
					
					<input class="submit" type="button" v-on:click="init" @click="setTimer" name="submit" value="立即注册" >
				</div>
				
			</div>
			

			
		</div>
		</form>
		</div>
	</body>
	<script type=" text/javascript">
	var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
		var vue=new Vue({
			el:"#div2",
			data:{
				input1:"",
			    input2:"",
			    input3:"",
			    numberdaoji:4,
			    input4:"",
			    phonein:"",
			    message:"",
			    zhengwang:"",
			    web_check_code:window.web_check_code,
			    web_server:window.web_server
			},
			methods:{
				init:function(){
					var self=this;
					  if(self.input1==""){
						self.message="请输入用户名，用户名不能为空";
						return false;
						}
						if(self.input2==""){
						self.message="请输入密码，密码不能为空";
						return false;
						}
						if(myreg.test(self.input3)==false){
				        self.message="您输入的手机号不符合规则，请您重新输入";
			          	return false;
				        }						
				        if(self.input4==""){
						self.message="请输入验证码，验证码不能为空";
						return false;
						}
						if(self.phonein==""){
						self.message="请输入短信验证码，验证码不能为空";
						return false;
						}
						if(self.zhengwang!=self.phonein){
						self.message="短信验证码输入错误，请您重新输入";
						return false;
						}
					var params=new URLSearchParams();
					params.append("userName",self.input1),
					params.append("password",self.input2),
					params.append("telphone",self.input3),
					params.append("code",self.input4),
					axios.defaults.withCredentials=true;
					axios.post(web_server+"api/user/register",params)
					  .then(function (response) {
					  	window.sessionStorage.setItem("loginUsername",self.input1)
					    var object=response.data;
					  
					   if(object.status==200&&((self.zhengwang==self.phonein)&&self.phonein.length>3)){
					   	window.location.href="login.html";
					   }
					  if(object.status==404){
							self.message=object.message;
						}
						if(object.status==500){
							self.message=object.message;
						}
					  })
					  .catch(function (error) {
					    console.log(error);
					  });
				},
				change:function(){
					this.web_check_code=this.web_check_code+"?"+Math.random();
				},
				phoneget:function(){
					var self=this;
					var params=new URLSearchParams();
					params.append("telphone",self.input3),
					axios.defaults.withCredentials=true;
					axios.post(web_server+"api/static/SMS",params)
					  .then(function (response) {	  
					    var object=response.data;
					   if(object.status==200){
					   self.zhengwang=object.data;
					   self.message=object.message;
					   }
					  if(object.status==404){
						self.message=object.message;
						}
						if(object.status==500){
							self.message=object.message;
						}
					  })
					  .catch(function (error) {
					    console.log(error);
					  });
				},
				init2:function(){
					if((self.zhengwang==self.input3)&&self.input3.length>3){
						
						window.location.href="login.html";
					}
				},
				setTimer:function(){
				       var self=this;
				　　　　this.timer=setInterval(() => {
				　　　　　　　　self.numberdaoji--;
				       if(self.numberdaoji==0){
				       	  self.message="";
				       	  self.numberdaoji=4;
				       }				
				　　　　　　}, 1000)
				
				　　}
			}
		})
		var countdown=60;
		function settime(obj) {
		    if (countdown == 0) {
		        obj.removeAttribute("disabled");   
		        obj.value="免费获取验证码";
		        countdown = 60;
		        return;
		    } else {
		        obj.setAttribute("disabled", true);
		        obj.value="重新发送(" + countdown + ")";
		        countdown--;
		    }
		setTimeout(function() {
		    settime(obj) }
		    ,1000)
		}
	</script>
</html>